﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title id='Description'>jQWidgets Calendar Range Selection Mobile Example
    </title>
    <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../simulator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <style type="text/css">
        html, body {
            font-size: 18px;
        }

        .section {
            padding: 10px;
            clear: both;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            font-weight: bold;
            background: transparent;
        }
 
        .jqx-calendar td {
            font-size: 18px;
        }

        .input {
            font-size: 18px;
            margin: 0px;
            left: 15px;
            border: none;
            height: 30px;
            line-height: 30px;
            display: block;
            position: relative;
            background: none;
        }
    </style>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("calendar");
            $("#fromCalendar").jqxCalendar({ theme: theme, titleHeight: 40, columnHeaderHeight: 40, width: '100%', height: '100%' });
            $("#toCalendar").jqxCalendar({ theme: theme, titleHeight: 40, columnHeaderHeight: 40, width: '100%', height: '100%' });
            $("#from").jqxToggleButton({ theme: theme, enableHover: false, width: '40%', height: 50 });
            $("#to").jqxToggleButton({ theme: theme, enableHover: false, width: '40%', height: 50 });
            // init dates.
            var fromDate = new Date();
            fromDate.setFullYear(2013, 4, 30);
            $("#fromCalendar").jqxCalendar('setDate', fromDate);
            var toDate = new Date();
            toDate.setFullYear(2013, 5, 25);
            $("#toCalendar").jqxCalendar('setDate', toDate);

            $("#fromcontainer").hide();
            $("#tocontainer").hide();

            var className = "jqx-widget-header" + " " + "jqx-widget-header-" + theme;
            $(".section").addClass(className);
            $("#from").click(function () {
                $("#tocontainer").hide();
                if ($("#fromcontainer").css('display') != 'block') {
                    $("#fromcontainer").show();

                    $("#fromCalendar").show();
                    $("#to").jqxToggleButton('unCheck');
                    $("#from").jqxToggleButton('check');
                }
                else {
                    $("#fromcontainer").hide();
                    $("#from").jqxToggleButton('unCheck');
                    $("#to").jqxToggleButton('unCheck');
                }
            });
            $("#to").click(function () {
                $("#fromcontainer").hide();
                if ($("#tocontainer").css('display') != 'block') {
                    $("#tocontainer").show();

                    $("#toCalendar").show();
                    $("#from").jqxToggleButton('unCheck');
                    $("#to").jqxToggleButton('check');
                }
                else {
                    $("#tocontainer").hide();
                    $("#from").jqxToggleButton('unCheck');
                    $("#to").jqxToggleButton('unCheck');
                }
            });
            $("#fromCalendar").on('cellSelected', function (event) {
                var date = $.jqx.dataFormat.formatdate(event.args.date, "MMM, dd");
                $("#fromLabel").html(date);
            });
            $("#toCalendar").on('cellSelected', function (event) {
                var date = $.jqx.dataFormat.formatdate(event.args.date, "MMM, dd");
                $("#toLabel").html(date);
            });

            $("#fromcontainer").css('visibility', 'visible');
            $("#tocontainer").css('visibility', 'visible');

            initSimulator("calendar");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div id='calendar' style="margin-left: 5%; position: relative; top: 20px; height: 70%; width: 90%;">
                <div class="section">
                    Set Report Date Range
                </div>
                <div id="from" style="float: left; font-size: 18px; margin: 6px;">
                    <div style="margin: 10px 5px;">
                        <img style="float: left; margin-right: 5px;" src="../../images/catalogicon.png" />
                        <span id="fromLabel" style="float: left; margin-top: 5px;">May, 30</span>
                    </div>
                </div>
                <div id="to" style="float: right; font-size: 18px; margin: 6px; margin-left: 0px;">
                    <div style="margin: 10px 5px">
                        <img style="float: left; margin-right: 5px;" src="../../images/catalogicon.png" />
                        <span id="toLabel" style="float: left; margin-top: 5px;">Jun, 25</span>
                    </div>
                </div>
                <div style="clear: both;"></div>
                <div id="fromcontainer" style="visibility: hidden; margin-top: 10px; margin-left: 5%; height: 80%; width: 90%;">
                    <div id="fromCalendar">
                    </div>
                </div>
                <div id="tocontainer" style="visibility: hidden; margin-top: 10px; margin-left: 5%; height: 80%; width: 90%;">
                    <div id="toCalendar">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
